<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-25 21:42:34
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-23 15:10:07
 * @Description: 
-->
<template>
  <div class="income">
    <div class="left-small">
      <div class="navlist">
        <div @click="navTo('account')" class="navItem">My account</div>
        <div @click="navTo('message')" class="navItem active">My message</div>
        <div class="navItem">
          <a-popconfirm
            title="Are you sure to quit?"
            ok-text="yes"
            cancel-text="no"
            @confirm="signout"
          >Sign out</a-popconfirm>
        </div>
      </div>
    </div>
    <div class="right-list">
      <div class="lst">My message</div>
      <div class="list">
        <div class="item" v-for="(item,index) in newslist" :key="index">
          <div class="title">
            <div class="circle"></div>
            {{ item.title }}
          </div>
          <div class="infolist yichu">{{ item.content }}</div>
        </div>
      </div>
      <div class="loadmore" :class="[hasmore ? '' : 'hasnot']">Loadmore</div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Dayjs } from 'dayjs';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getNewslst } from '../../../api/msg';
import { getStorageItem, setStorageItem } from '../../../utils/utils';
import { newsItem } from '../../types';

// 菜单跳转
const router = useRouter()
const walletAct = getStorageItem('walletAct') || 'Income'
const activelink = ref(walletAct)
const navTo = (item: string) => {
  setStorageItem('walletAct', item)
  activelink.value = item
  const realLink = item === 'account' ? '/my/account' : '/my/msg'
  router.push(realLink)
}

const store = useStore()
const signout = () => {
  store.dispatch('user/updateAccessToken', '')
  store.dispatch('user/updateRefreshToken', '')
  router.push('/login')
}


const newslist = ref<newsItem[]>([])
const nowPage = ref(1)
const total = ref(1)
const pageSize = ref(10)
const hasmore = ref(true)
const getNews = async () => {
  const res = await getNewslst()
  if (res) {
    newslist.value = res.result.records
    nowPage.value = res.result.current
    total.value = res.result.total
    pageSize.value = res.result.size
    hasmore.value = nowPage.value * pageSize.value < total.value ? true : false
  }
}
onMounted(() => {
  getNews()
})

</script>
<style lang='scss' scoped>
.income {
  width: 1600px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  .left-small {
    width: 387px;
    margin-right: 40px;
    .navlist {
      width: 387px;
      height: 244px;
      background-color: #fff;
      border-radius: 0 0 5px;
      border-top: 2px solid #e60044;
      padding: 3px 37px;
      margin-bottom: 20px;
      .navItem {
        width: 100%;
        height: 79px;
        line-height: 79px;
        font-size: 24px;
        font-family: Galvji;
        font-weight: normal;
        color: #000000;
      }
      .navItem:nth-child(2) {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
      }
      .navItem.active {
        font-weight: bold;
      }
    }
  }
  .right-list {
    flex: 1;
    height: 1545px;
    background-color: #fff;
    border-top: 2px solid #e60044;
    padding: 53px 53px;
    position: relative;
    .loadmore {
      width: 350px;
      height: 48px;
      background: #e60044;
      border-radius: 24px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 70px;
      left: 415px;
      cursor: pointer;
    }
    .hasnot {
      cursor: not-allowed;
    }
    .lst {
      font-size: 24px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      margin-bottom: 40px;
    }
    .list {
      .item {
        width: 1077px;
        height: 192px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 30px 23px;
        .title {
          display: flex;
          align-items: center;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          .circle {
            width: 10px;
            height: 10px;
            background: #e60044;
            border-radius: 5px 5px 5px 5px;
            margin-right: 1em;
          }
        }
        .infolist {
          width: 1034px;
          height: 120px;
        }
      }
    }
  }
}
</style>
